<!--承运商首页-->
<style scoped>
.driver-detail {
    margin-top: 0;
    margin-bottom: .3rem;
}
</style>

<template>
  <div>
    <header-menu></header-menu>
        <div class="tml-header">
            <ul class="th-list cf displayflex">
                <router-link to="/carrier/handoverlist" tag="li" class="flex1">
                  <div class="llse llse-jiaohuo"></div>
                  <div class="txt">交货确认</div>
                </router-link>
                <router-link to="/carrier/receivelist" tag="li" class="flex1">
                  <div class="llse llse-qianshou"></div>
                  <div class="txt">代签收</div>
                </router-link>
                <!-- <router-link to="/carrier/transitlist" tag="li" class="flex1">
                  <div class="llse llse-shouli"></div>
                  <div class="txt">中转受理</div>
                </router-link> -->
                <router-link to="/carrier/carrload" tag="li" class="flex1">
                  <div class="llse llse-zaitu"></div>
                  <div class="txt">在途录入</div>
                </router-link>
                <!-- <router-link to="" tag="li" class="swiper-slide" v-show="length" >
                  <div class="llse llse-jiaohuo"></div>
                  <div class="txt">关联设备</div>
                </router-link>
                <router-link to="" tag="li" class="swiper-slide" v-show="length" >
                  <div class="llse llse-jiaohuo"></div>
                  <div class="txt">冷链装箱</div>
                </router-link> -->
            </ul>
            <!-- <div class="swiper-pagination" v-show="paged"></div> -->
        </div> 
    <div class="ll-contain">   
      <div class="wait-orders">
          <span class="f-l">待处理订单
              <i>{{totalLength}}</i>
          </span>
          <!-- <a v-link="{path:'/carr_list?state=23'}" class="f-r">查看更多
              <em class="iconfont icon-more"></em>
          </a> -->
      </div>
      <template v-if="todolist.length>0">
        <scroller lock-x height="-314" @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="100">
          <div>
            <div class="driver-list driver-detail" v-for="item in todolist">
                <div class="list-header">
                    <span class="f-l">物流单号：
                        <i>{{item.TPLPoNo}}</i>
                    </span>
                    <em class="f-r orange">物流派单确认</em>
                </div>
                <div class="list-content">
                    <dl class="displayflex">
                        <dt>
                           <div>
                              <i class="llse llse-cargo"></i>
                              <p>{{item.OrdersPKGS}}件</p>
                            </div>
                        </dt>
                        <dd class="flex1">
                            <p>
                                <label>起运时间：</label>
                                <span>{{item.DepartureDate | time}}</span>
                            </p>
                            <p>
                                <label>起运地：</label>
                                <span>{{item.DepartureVenue}}</span>
                            </p>
                            <p>
                                <label>目的地：</label>
                                <span>{{item.ArrivalVenue}}</span>
                            </p>
                        </dd>
                    </dl>
                </div>
                <div class="list-btn">
                  <div class="carbtn" @click="clickDetail(item.Guid, item.TPLPoNo)">详情</div>
                  <div class="carbtn"  v-if="item.State == 23" @click="AcceptBill(item.Guid)">接单</div>
                  <div class="carbtn refuse" v-if="item.State == 23" @click="clickRefuse(item.Guid)">拒单</div>
                  <div class="carbtn"  v-if="item.State == 42" @click="sendcar(item.Guid)">派车</div>
                </div>
            </div>
            <p class="txt-bottom" v-if="totalLength == todolist.length"><em class="txt">我是有底线的</em></p>
          </div>
        </scroller>
      </template>
    </div>
    <!--拒单弹窗 start-->
    <popup v-model="popupVisible" position="bottom">
      <div class="reason-check">
          <Checklist title="拒接取货单原因" label-position="left" :max="1"
            :options="commonList" 
            v-model="checkedName" 
            @on-change="selectNames"></Checklist>
      </div>
      <div class="txtarea-other" v-if="moneshow">
        <textarea placeholder="请填写其它原因" rows="3" v-model="Memo" type="text"></textarea>
      </div>
      <div class="bottom-two-btn">
        <div class="new-btn" @click="refuseBill('-1')">取消</div>
        <div class="new-btn" @click="refuseBill('1')">确认</div>        
      </div>
	  </popup>
    <!--拒单弹窗 end-->
    <div class="noDate_page" v-if="totalLength==0">
        <div class="noDate_icon">
            <i class="iconfont icon-null"></i>
        </div>
        暂无数据！
    </div>
    <footer-menu :status='1'></footer-menu>

  </div>
</template>

<script>
import headerMenu from '@/components/carrier/core/carrier-headermenu.vue';
import footerMenu from '@/components/carrier/core/carrier-footer.vue';
import {Checklist} from 'vux';
// import Swiper from '$static/swiper/swiper-3.4.2.min.js';
import { mapState } from "vuex";
export default {
    components:{
        footerMenu,
        headerMenu,
        Checklist
    },
    data(){
      return{
          length: false,
          popupVisible: false,
          moneshow: false,
          Memo: '',
          checkedName: [],
          show: false,
          paged: false,

          billno:'',
          Page:'',
          pgNo:'',
          pgSize:'',
          todolist:[],
          totalLength:'',
          commonList:["有事无法接单","商品数量不对","商品破损","其它"],
          count: 0,
          choiceId:''
      };
    },
    computed: {
      userinfo(){
        return localStorage.userinfo?JSON.parse(localStorage.userinfo):null
      }
    },
    created() {
        this.getData();
        // this.getExcepReason();
    },
    watch: {
      todolist(val){
        this.count = 0;
      }
    },
    mounted() {  
    },
    methods: {
      // 获取列表信息
      getData: function(type) {
          var self = this;
          if (type == 1) {
              this.Page = 0;
              this.pgNo = 0;
              this.todolist = [];
          }
          var userinfo =JSON.parse(localStorage.userinfo);
          var params = {
              DeliverGuid: userinfo.BelongGuid,
              TPLPoNo: self.billno,
              TPLPoType: '2',
              State: '23',
              Page: 0,
              PageSize: 999,
          };
          this.Ajax.post('SearchOrderTRTPLPoMainCCApi', params).then(function(resp) {
              if (resp.IsSuccess) {
                  if (resp.Datas.length > 0) {
                      self.Page++;
                      self.todolist = self.todolist.concat(resp.Datas);
                  }
                  self.totalLength = resp.TotalRecords;
              } else {
                  self.Toast({
                      message: '列表为空，请稍后刷新',
                  });
              }
          });
      },
      
      // getExcepReason(){
      //   let query = {
      //     TypeValue: 'Refusalreason'
      //   };
      //   this.Ajax.post('GetDatadictionaries', query).then((res) => {
      //     if(res.IsSuccess){
      //       this.commonList = [];
      //       res.Datas.forEach((x) => {
      //         this.commonList.push(x.DataIntroduction);
      //       })
      //     } else {
      //       this.Toast(res.ErrorMessage);
      //     }
      //   })
      //   .catch((e) => {
      //     this.Toast('出错了，请刷新重试')
      //   })
      // },


      //下一页
      changePgItems() {
          this.pgNo++;
          this.Page = this.pgNo * this.pgSize;
          this.getData();
      },
      //翻页
      onScrollBottom() {
        this.count++;
        if (this.count == 1 && this.totalLength > this.todolist.length) {
          this.changePgItems();
        }
      },
      // 点击接单
      AcceptBill: function(id) {
          var self = this,
              params = {
                Guid: id,
                State: '41',
                ExcuteState: '41',
                CreateUserId: this.userinfo.StaffID,
                CreateUserName: this.userinfo.Name,
              }
          self.MessageBox.confirm('是否接单?').then(action => {
            this.Ajax.post('SubmitAcceptBill', params).then(function(resp) {
                  if (resp.IsSuccess == true) {
                      self.Toast({
                          message: '接单成功',
                      });
                      self.getData(1);
                  } else {
                      self.Toast({
                          message: '操作异常，请稍后刷新',
                      });
                  }
              });
          })
      },
      // 点击拒单
      clickRefuse(guid) {
          this.choiceId = guid;
          this.popupVisible = true;
      },
      //原因其他选择
      selectNames(){
        if (this.checkedName[0] == '其它') {
          this.moneshow=true;
          this.Memo="";
        }else{
          this.moneshow=false;
        }
      },
      // 点击派车
      sendcar: function(guid) {
          var self = this;
          var query = {
              Guid: guid,
              State: '44',
              BizState: '2',
              LogState: '44',
          }
          self.MessageBox.confirm('是否派车?').then(action => {
              this.Ajax.post('SendCarApi', query).then(function(resp) {
                  if (resp.IsSuccess == true) {
                      self.Toast({
                          message: '派车成功！',
                      });
                      self.getData(1);
                  } else {
                      self.Toast({
                          message: '派车失败！',
                      });
                  }
              });
          })
      },
      //拒单原因的，取消-确定，按钮
      refuseBill: function(num) {
          if (num == '-1') {
              this.popupVisible = false;
              this.choiceId = '';
              this.checkedName[0] = '';
              return false;
          }
          if (this.checkedName[0] == '') {
              this.Toast({
                  message: '请选择拒单理由！',
              });
              return false;
          }

          var self = this;
          var query = {
              Guid: self.choiceId,
              State: '22',
              ExcuteState: '49',
              Memo: self.checkedName[0],
              CreateUserId: this.userinfo.StaffID,
              CreateUserName: this.userinfo.Name,
          };
          this.Ajax.post('SubmitAcceptBill', query).then(function(resp) {
              if (resp.IsSuccess) {
                  self.getData(1);
                  self.choiceId = '';
                  self.Toast({
                      message: '拒单成功！',
                  });
                  self.popupVisible = false;
                  self.checkedName[0] = "";
              } else {
                  self.choiceId = '';
                  self.Toast({
                      message: '拒单失败！',
                  });
              }
          });
      },
      //菜单轮播
      // swiperWrap() {
      //   var mySwiper = new Swiper('.swiper-container', {
      //       loop: false,
      //       autoHeight: true,
      //       slidesPerView: 4,
      //       slidesPerGroup: 4,
      //   })
      // },

      clickDetail(Guid, TPLPoNo){
        this.$router.push({
          path: '/carrier/carrdetailMulti',
          query: {
            Guid: Guid,
            TPLPoNo: TPLPoNo,
          }
        });
      },
    },
}
    
</script>